
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div class="svg-wrapper">
		 <svg height="200" width="200" xmlns="http://www.w3.org/2000/svg"> 
		   <circle cx="83" cy="83" r="81" class="shape" height="200" width="200"></circle>
		  
		 </svg>
		 
		 <style>  
		</div>
		 .body {
		   background: rgb(20,20,20);
		   text-align: center;
		   height: 100%;
		   overflow: hidden;
		 }
		 .svg-wrapper {
		   position: relative;
		   top: 10%;
		   transform: translateY(-50%);
		 	  margin: 10%;
		   width: 164px;  
		 }
		 .shape {
		   stroke-dasharray: 0 540;
		   stroke-dashoffset: -474;
		   stroke-width: 5px;
		   stroke: orange;
		   border-radius: 100%;
		   transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
		 }
		
		 .svg-wrapper:hover .shape {
		   stroke-width: 2px;
		   stroke-dashoffset: 0;
		   stroke-dasharray: 760;
		   border-radius: 100%;
		 }
		 </style >
			 
		<div class ="angellist">
         <svg xmlns="http://www.w3.org/2000/svg" 
	     aria-hidden="true" focusable="false"
	     data-prefix="fas" data-icon="angellist" 
	     class="svg-inline--fa fa-baby-carriage fa-w-16"
		 role="img" viewBox="0 0 555 555">
	     <path fill="currentColor" d="M347.1 215.4c11.7-32.6 45.4-126.9 45.4-157.1 0-26.6-15.7-48.9-43.7-48.9-44.6 0-84.6 131.7-97.1 163.1C242 144 196.6 0 156.6 0c-31.1 0-45.7 22.9-45.7 51.7 0 35.3 34.2 126.8 46.6 162-6.3-2.3-13.1-4.3-20-4.3-23.4 0-48.3 29.1-48.3 52.6 0 8.9 4.9 21.4 8 29.7-36.9 10-51.1 34.6-51.1 71.7C46 435.6 114.4 512 210.6 512c118 0 191.4-88.6 191.4-202.9 0-43.1-6.9-82-54.9-93.7zM311.7 108c4-12.3 21.1-64.3 37.1-64.3 8.6 0 10.9 8.9 10.9 16 0 19.1-38.6 124.6-47.1 148l-34-6 33.1-93.7zM142.3 48.3c0-11.9 14.5-45.7 46.3 47.1l34.6 100.3c-15.6-1.3-27.7-3-35.4 1.4-10.9-28.8-45.5-119.7-45.5-148.8zM140 244c29.3 0 67.1 94.6 67.1 107.4 0 5.1-4.9 11.4-10.6 11.4-20.9 0-76.9-76.9-76.9-97.7.1-7.7 12.7-21.1 20.4-21.1zm184.3 186.3c-29.1 32-66.3 48.6-109.7 48.6-59.4 0-106.3-32.6-128.9-88.3-17.1-43.4 3.8-68.3 20.6-68.3 11.4 0 54.3 60.3 54.3 73.1 0 4.9-7.7 8.3-11.7 8.3-16.1 0-22.4-15.5-51.1-51.4-29.7 29.7 20.5 86.9 58.3 86.9 26.1 0 43.1-24.2 38-42 3.7 0 8.3.3 11.7-.6 1.1 27.1 9.1 59.4 41.7 61.7 0-.9 2-7.1 2-7.4 0-17.4-10.6-32.6-10.6-50.3 0-28.3 21.7-55.7 43.7-71.7 8-6 17.7-9.7 27.1-13.1 9.7-3.7 20-8 27.4-15.4-1.1-11.2-5.7-21.1-16.9-21.1-27.7 0-120.6 4-120.6-39.7 0-6.7.1-13.1 17.4-13.1 32.3 0 114.3 8 138.3 29.1 18.1 16.1 24.3 113.2-31 174.7zm-98.6-126c9.7 3.1 19.7 4 29.7 6-7.4 5.4-14 12-20.3 19.1-2.8-8.5-6.2-16.8-9.4-25.1z"/>
		 </svg>
         <style>
			 * { fill:pink; }
        :hover { fill: black; }
		 </style>
		
		 

	
<style>
		div
{
	width:250px;
	height:200px;
	background:white;
	animation:myfirst 8s;
	transition: width 5s, height 5s, transform 5s; 
-webkit-transition: width 5s, height 5s, -webkit-transform 5s; 

	-moz-animation:myfirst 8s;
	transition: width 5s, height 5s, transform 5s; 
-webkit-transition: width 5s, height 5s, -webkit-transform 5s; 

	
	/* Firefox */
	-webkit-animation:myfirst 8s; 
	transition: width 5s, height 5s, transform 5s; 
-webkit-transition: width 5s, height 5s, -webkit-transform 5s; 
	
	/* Safari and Chrome */
	-o-animation:myfirst 8s;
	transition: width 5s, height 5s, transform 5s; 
-webkit-transition: width 5s, height 5s, -webkit-transform 5s; 

	

}


div
{
transform: rotate(10deg);
transform-origin:40% 600%;
-ms-transform: rotate(10deg); /* IE 9 */
-ms-transform-origin:40% 600%; /* IE 9 */
-webkit-transform: rotate(10deg); /* Safari and Chrome */
-webkit-transform-origin:40% 600%; /* Safari and Chrome */
}


div:hover {
    width: 150px;
    height: 150px;
    -webkit-transform: rotate(-720deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
}

</style>
</svg></div>
<style>
p
{ 
   text-shadow：5px 5px 5px pink;	
}

</style>
	
	<h1> Hola！</h1>
	<p>移动你的鼠标看看！</p>

	
	</body>
</html>
